<template>
    <div class="app-root">
        <div class="app-root-view">
            <router-view name="view" v-slot="{ Component }">
                <transition name="view-transition" mode="out-in">
                    <keep-alive :include="arr">
                        <component ref="keepAliveDom" :is="Component" :key="$route.fullPath" />
                    </keep-alive>
                </transition>
            </router-view>
        </div>


        <!-- 右上角的消息弹窗 -->
        <myMessageBox ref="myMessageBox_dom" class="messageBox"></myMessageBox>

        <!-- 全局的索引layout -->
        <myLayout></myLayout>

        <myLive2D class="live2DBox"></myLive2D>
    </div>
</template>

<script setup>
import {
    onMounted,
    ref,
} from 'vue'
import myMessageBox from "@/components/messageBox/index.vue";
import myLayout from '@/components/layout/index-v2.vue';
import myLive2D from '@/components/live2dBox/index.vue';


const myMessageBox_dom = ref();
const keepAliveDom = ref();

const arr = ref(['gal']);

onMounted(() => {
    setTimeout(() => {
        messageBox.init(myMessageBox_dom.value);

        // console.log(keepAliveDom.value)
    }, 300);


    window.pageCache = arr;
})




</script>

<style scoped lang="scss">
.app-root {
    width: 100vw;
    height: 100vh;

    .app-root-view {
        width: 100%;
        height: 100%;
        // pointer-events: none;
    }

    .messageBox {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    .layout {
        // position: fixed;
        // top: 30%;
        // left: 80%;
    }

    .live2DBox {
        position: fixed;
        right: 0%;
        bottom: -10px;
    }
}


// 进入后和离开前保持原位
.view-transition-enter-to,
.view-transition-leave-from {
    opacity: 1;
    transform: none;
}

// 设置进入和离开过程中的动画时长0.5s
.view-transition-enter-active {
    transition: all 0.5s;
}

.view-transition-leave-active {
    transition: all 0s;
}

// 进入前和离开后为透明，并在右侧20px位置
.view-transition-enter-from {
    opacity: 0;
}

.view-transition-leave-to {
    opacity: 1;
}
</style>